<template>
    <div id="search">
        <div class="head">
            <van-nav-bar
            title="搜索"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
            />
        </div>
        <div class="contentbox">
             <van-search
                v-model="search"
                show-action
                placeholder="商品搜索"
                @input="onSearch"
                @cancel="onClickLeft"
            />

            <div class="start" v-if="!isInput&&!isClick">
                <div class="history">
                    <div class="t">
                        <div>历史记录</div>
                        <div class="icon" @click="clear"></div>
                    </div>
                    <div class="cont">
                        <div class="his_tag"  v-for="item in historyData" :key="item.id"  @click="filters(item.keyword)" >{{item.keyword}}</div>
                    </div>
                </div>
                <div class="history hotsearch">
                    <div class="t">
                        <div>热门搜索</div>
                    </div>
                    <div class="cont">
                        <div class="his_tag active" v-for="(item,index) in hotKeywordList" :key="index" @click="hotAdd(item.keyword)">{{item.keyword}}</div>
                    </div>
                </div>
            </div>
            <div class="end" v-if="isInput&&!isClick">
                <div class="item" v-for="item in keywords" :key="item.id" @click="addWord">{{item.name}}</div>
            </div>
            <div class="filter" v-if="!isInput&&isClick">
                <div class="sortNav">
                    <div class="tab active" @click="change($event)">综合</div>
                    <div class="tab asc"   @click="change($event)">价格</div>
                    <div class="tab"  @click="change($event)">分类</div>
                </div>
                <div class="sortlist">
                    <van-grid :column-num="2" :gutter="5">
                        <van-grid-item  v-for=" item in keywords" :key="item.id" :to="`/cart/goods?id=${item.id}`" >
                            <van-image :src="item.list_pic_url"  class="img"/>
                            <p class="name">{{item.name}}</p>
                            <p class="price">￥{{item.retail_price}}</p>
                        </van-grid-item>
                    </van-grid>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {Sindexaction,addhistoryaction,helperaction,clearhistoryAction} from "@/api/home/search"
import {mapMutations} from "vuex"
import $ from "jquery"
    export default {
        data() {
            return {
                search:'',
                isInput:false,
                isClick:false,
                word:"",
                order:"asc",
                hotKeywordList:[],
                keywords:[],
                historyData:[]
            }
        },
        methods:{
            onClickLeft(){
                this.$router.go(-1);
                this.$store.commit('setInfo',"")
            },
            onSearch(){
                this.isInput=true
                this.isClick=false
                if(this.search==""){
                    this.isInput=false
                }
                var order=this.order="asc" ? "desc" : "asc";
                helperaction({
                    keyword:this.search,
                    order:order
                })
                .then(res=>{
                    console.log(res);
                    this.keywords=res.keywords
                })
            },
            clear(){
                clearhistoryAction({
                    openId:localStorage.getItem('openId')
                })
                .then(res=>{
                    console.log(res);
                    
                    Sindexaction({
                        openId:localStorage.getItem('openId')
                    })
                    .then(res=>{
                        console.log(res);
                        this.hotKeywordList=res.hotKeywordList
                        this.historyData=res.historyData
                    })
                })
            },
            addWord(){
                addhistoryaction({
                    keyword:this.search,
                    openId:localStorage.getItem('openId')
                }).then(res=>{
                    console.log(res);
                })
                
                
            },
             change($event){
               
                if(!$event.target.classList.contains('active')){
                    $event.target.classList.add('active')
                    $($event.target).siblings().removeClass('active')
                    this.order='asd'
                    if($($event.target).hasClass('dsc')) {
                        $($event.target).removeClass('dsc')
                        $($event.target).addClass('asc');
                        this.order="asc"
                    }
                }else{
                    if($($event.target).hasClass('asc')) {
                        $($event.target).removeClass('asc')
                        $($event.target).addClass('dsc');
                        this.order="desc"

                    }else{
                        $($event.target).removeClass('dsc')
                        $($event.target).addClass('asc');
                        this.order="asc"
                    }
                }

                this.filters(this.word)
               
            },
            filters(keyword){
                this.isClick=true;
                this.word=keyword
                helperaction({
                    keyword:this.word,
                    order:this.order
                })
                .then(res=>{
                    console.log(res);
                    this.keywords=res.keywords
                })

            },
            hotAdd(keyword){
                console.log(keyword);
                this.filters(keyword);
                addhistoryaction({
                    keyword:keyword,
                    openId:localStorage.getItem('openId')
                }).then(res=>{
                    console.log(res);
                })
                Sindexaction({
                    openId:localStorage.getItem('openId')
                })
                .then(res=>{
                    console.log(res);
                    this.hotKeywordList=res.hotKeywordList
                    this.historyData=res.historyData
                })
            }
        },
        computed:{
            ...mapMutations(['setInfo'])
        },
        created(){
            Sindexaction({
                openId:localStorage.getItem('openId')
            })
            .then(res=>{
                console.log(res,"1");
                this.hotKeywordList=res.hotKeywordList
                this.historyData=res.historyData
            })
           
            
        }

    }
</script>

<style lang="scss" scoped>

@mixin guid-sty{

    .img{
        width: 150px;
        height: 150px;
        margin: 0 auto;
    }

    .name{
        margin: 7.5px 12px 0;
        text-align: center;
        padding: 0 10px;
        font-size: 12px;
    }
    .price{
        text-align: center;
        font-size: 15px;
        color: #b4282d;
        margin-bottom: 0;
    }
}
.head {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
}
.contentbox {
    margin-top: 50px;
    
}
#search{
    background-color: #eee;
    height: 100vh;
}


.search{
    height: 54px;   
}

.history{
    background-color: #fff;
    padding: 16px;

    .t{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 28px;
        margin-bottom: 15px;

        .icon{
            width: 28px;
            height: 28px;
            background: url('../../../assets/images/del-address.png') no-repeat center;
            background-size: 16px;
        }
    }
    .cont{
        display: flex;
        flex-wrap: wrap;

        .his_tag{
            padding: 5px;
            margin:0 15px 10px 0 ;
            border: 1px solid #999;
        }
        .active:nth-child(1){
            border: .01333rem solid #b4282d;
            color: #b4282d;
        }
        
    }
     .hotsearch{
         margin-top: 10px;
    }
}
.end{
    background-color: #fff;
    .item{
        padding: 10px 20px;
        text-align: left;
    }
}
.sortNav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;

    .tab {
        width: 33%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 12px;

    }
    .tab.active{
        color:#b4282d; 
    }
    .tab.asc{
        background: url('../../../assets/images/price_icon.png') no-repeat  80% center ;
        background-size: 8px 12px;
    }
    .tab.asc.active{
        background: url('../../../assets/images/dsc.png') no-repeat  80% center ;
        background-size: 8px 12px;
    }
    .tab.dsc.active{
        background: url('../../../assets/images/asc.png') no-repeat  80% center ;
        background-size: 8px 12px;
    }


}
.sortlist{
    @include guid-sty;
}

</style>